<template>
  <div class="app-container">
    <!-- 搜索区域使用 collapse transition -->
    <el-collapse-transition>
      <el-card v-show="isFilterVisible" class="search-wrapper filter-card" shadow="hover">
        <div>
          <el-form ref="filterForm" :model="listQuery" :inline="true" label-width="80px">
            <el-form-item label="日期:">
              <div class="date-range-container">
                <el-date-picker
                  v-model="listQuery.startDate"
                  type="date"
                  placeholder="起始日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 140px"
                />
                <span class="date-separator">至</span>
                <el-date-picker
                  v-model="listQuery.endDate"
                  type="date"
                  placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 140px"
                />
              </div>
            </el-form-item>

            <el-form-item label="供应商:">
              <el-input
                v-model="listQuery.supplier"
                placeholder="请输入供应商编号或名称"
                suffix-icon="el-icon-more"
                style="width: 200px"
                clearable
              />
            </el-form-item>

            <el-form-item label="业务员:">
              <el-input
                v-model="listQuery.salesperson"
                placeholder="请输入业务员姓名"
                suffix-icon="el-icon-more"
                style="width: 150px"
                clearable
              />
            </el-form-item>

            <el-form-item label="付款状态:">
              <el-select v-model="listQuery.paymentStatus" placeholder="全部" style="width: 120px" clearable>
                <el-option label="全部" value="" />
                <el-option label="未付款" value="unpaid" />
                <el-option label="部分付款" value="partial" />
                <el-option label="已付款" value="paid" />
              </el-select>
            </el-form-item>

            <el-form-item label="对单状态:">
              <el-select v-model="listQuery.checkStatus" placeholder="全部" style="width: 120px" clearable>
                <el-option label="全部" value="" />
                <el-option label="未对单" value="unchecked" />
                <el-option label="已对单" value="checked" />
              </el-select>
            </el-form-item>

            <el-form-item label="退货状态:">
              <el-select v-model="listQuery.returnStatus" placeholder="全部" style="width: 120px" clearable>
                <el-option label="全部" value="" />
                <el-option label="未退货" value="unreturned" />
                <el-option label="已退货" value="returned" />
              </el-select>
            </el-form-item>

            <el-form-item class="form-buttons">
              <el-button type="primary" size="small" icon="el-icon-search" @click="handleFilter">查询</el-button>
              <el-button size="small" icon="el-icon-refresh" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </el-collapse-transition>

    <el-card class="main-content-card" shadow="hover">
      <!-- 报表标题 - 居中显示，添加渐变背景 -->
      <div class="report-title-container">
        <div class="report-title-centered">购货单记录</div>
      </div>
      <!-- 操作按钮区域 -->
      <div class="table-operations">
        <div class="left-operations">
          <el-button
            type="primary"
            size="small"
            class="filter-trigger"
            @click="isFilterVisible = !isFilterVisible"
          >{{ isFilterVisible ? "收起" : "检索" }}
            <i :class="['el-icon-arrow-down', { 'is-reverse': isFilterVisible }]" />
          </el-button>
          <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">新增</el-button>
          <el-button size="small" icon="el-icon-check" @click="handleAudit">审核</el-button>
          <el-button size="small" icon="el-icon-printer" @click="handlePrint">打印</el-button>
          <el-button size="small" icon="el-icon-download" @click="handleExport">导入</el-button>
          <el-button size="small" icon="el-icon-delete" @click="handleDelete">删除</el-button>
          <el-button size="small" icon="el-icon-connection" @click="handleMatch">对单</el-button>
        </div>
        <div class="right-operations" />
      </div>

      <!-- 数据表格 -->
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        stripe
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="操作" width="100" fixed>
          <template>
            <el-button type="text" size="small" icon="el-icon-edit" />
            <el-button type="text" size="small" icon="el-icon-delete" />
          </template>
        </el-table-column>
        <el-table-column prop="date" label="单据日期" width="100" sortable />
        <el-table-column prop="orderNo" label="单据编号" width="150" />
        <el-table-column prop="supplier" label="供应商" width="200" />
        <el-table-column prop="salesperson" label="业务员" width="100" />
        <el-table-column prop="returnOrderNo" label="关联购货退货单号" width="150" />
        <el-table-column prop="purchaseOrderNo" label="关联购货订单号" width="150" />
        <el-table-column prop="quantity" label="数量" width="100" align="right" />
        <el-table-column prop="amount" label="购货金额" width="120" align="right" />
        <el-table-column prop="discount" label="优惠后金额" width="120" align="right" />
        <el-table-column prop="paid" label="已付款" width="120" align="right" />
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'OrderHistoricalDocuments',
  data() {
    return {
      isFilterVisible: false,
      listQuery: {
        page: 1,
        limit: 10,
        startDate: '',
        endDate: '',
        supplier: '',
        salesperson: '',
        paymentStatus: '',
        checkStatus: '',
        returnStatus: ''
      },
      total: 0,
      tableData: [
        {
          date: '2025-03-25',
          orderNo: 'CG2025032501',
          supplier: 'G00005食品零售供应商',
          salesperson: '采购-小陈',
          returnOrderNo: '',
          purchaseOrderNo: '',
          quantity: 3,
          amount: 10.88,
          discount: 10.88,
          paid: 10.88
        }
      ]
    }
  },
  methods: {
    handleFilter() {
      // 处理查询
    },
    resetForm() {
      this.$refs.filterForm.resetFields()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      // 重新加载数据
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      // 重新加载数据
    },
    handleAdd() {
      // 处理新增
    },
    handleAudit() {
      // 处理审核
    },
    handlePrint() {
      // 处理打印
    },
    handleExport() {
      // 处理导出
    },
    handleDelete() {
      // 处理删除
    },
    handleMatch() {
      // 处理对单
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.search-wrapper {
  margin-bottom: 20px;
}

.date-range-container {
  display: flex;
  align-items: center;
}

.date-separator {
  margin: 0 5px;
}

.table-operations {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.left-operations, .right-operations {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-trigger .el-icon-arrow-down {
  margin-left: 5px;
  transition: transform 0.3s;
}

.filter-trigger .el-icon-arrow-down.is-reverse {
  transform: rotate(180deg);
}

// 主内容卡片
.main-content-card {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

// 报表标题容器 - 添加渐变背景
.report-title-container {
  background: linear-gradient(to right, #f7f9fb, #e8eef5, #f7f9fb);
  padding: 15px 0;
  margin: -40px -20px 15px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
}

// 居中显示的报表标题
.report-title-centered {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #303133;
  position: relative;

  &:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, #f7f9fb, #409EFF, #f7f9fb);
    border-radius: 3px;
  }
}

// 分页容器
.pagination-container {
  margin-top: 20px;
  text-align: right;
}

// 表格内数字列的样式
.el-table {
  .cell {
    .number-column {
      font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    }
  }
}

// 表格操作按钮
.el-button--text {
  padding: 2px 0;
  margin-right: 8px;
}
</style>
